@import (reference) '../style/variables.less';

@media @v-device-show {
  .@{prefix}-mobile-demo-pure {
    .__dumi-default-previewer-actions,
    .__dumi-default-device-action,
    .__dumi-default-device-status {
      display: none;
    }
  }

  .@{prefix}-mobile-previewer {
    &.@{prefix}-mobile-previewer-inline {
      display: flex;
      width: 100%;
      height: 600px;
      overflow: hidden;

      .@{prefix}-btn-expand {
        display: none;
      }

      .@{prefix}-previewer {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .@{prefix}-previewer-target,
      .@{prefix}-previewer-source-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-color: #efefef !important;
        box-shadow: none !important;
      }

      .@{prefix}-device {
        border: solid 1px #efefef;
        border-right: 0;
      }
      // .@{prefix}-previewer-source-wrapper {
      //   height: 100%;
      // }
      .@{prefix}-previewer-source {
        flex: 1;
        height: 100%;
        overflow: auto;
        // display: flex;
        // flex-direction: column;
        background-color: #f9fafb;
      }
    }

    .@{prefix}-previewer-demo {
      display: none;
    }

    .@{prefix}-previewer-desc,
    .@{prefix}-previewer-desc:not([data-title]) + .@{prefix}-previewer-actions {
      border-top: none;
    }

    // button[role='source'] {
    //   margin-right: -8px;
    //   width: 0;
    //   opacity: 0;
    //   overflow: hidden;
    //   pointer-events: none;
    // }
  }

  [data-prefers-color='dark'] .@{prefix}-previewer-source {
    background-color: #262626;
  }
}
